<script setup>
  import '@wangeditor/editor/dist/css/style.css'; // 引入 css
  import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue';
  import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
  import { DomEditor } from '@wangeditor/editor';
  const valueHtml = defineModel();
  const props = defineProps({
    placeholder: {
      type: String,
      default: '',
    },
    height: {
      type: String,
      default: '100%',
    },
    scroll: {
      type: Boolean,
      default: false,
    },
    readOnly: {
      type: Boolean,
      default: false,
    },
    text: {
      type: String,
    },
    textAlign: {
      type: String,
      default: 'left',
    },
    toolbarType: {
      type: String,
      default: '0',
    },
    maxLength: {
      type: Number,
      default: -1,
    },
  });

  // 编辑器实例
  const editorRef = shallowRef();

  // default 或 'simple'
  let mode = 'default';

  const editorConfig = {
    placeholder: props.placeholder,
    scroll: props.scroll,
    readOnly: props.readOnly,
    MENU_CONF: {},
  };
  if (props.maxLength != -1) {
    editorConfig.maxLength = props.maxLength;
  }
  editorConfig.MENU_CONF['uploadImage'] = {
    server: 'http://localhost:8080/common/saveImgToHost',
    // form-data fieldName ，默认值 'wangeditor-uploaded-image'
    fieldName: 'imgName',
    // 单个文件的最大体积限制，默认为 2M
    maxFileSize: 10 * 1024 * 1024, // 1M
    // 最多可上传几个文件，默认为 100
    maxNumberOfFiles: 10,
    // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
    allowedFileTypes: ['image/*'],
    // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
    // meta: {
    //   token: 'xxx',
    //   otherKey: 'yyy',
    // },
    // 将 meta 拼接到 url 参数中，默认 false
    metaWithUrl: false,
    // 自定义增加 http  header
    // headers: {
    //   Accept: 'text/x-json',
    //   otherKey: 'xxx',
    // },
    // 跨域是否传递 cookie ，默认为 false
    withCredentials: false,
    // 超时时间，默认为 10 秒
    timeout: 5 * 1000, // 5 秒

    onSuccess(file, res) {
      console.log(file);
      console.log(`${file.name} 上传成功`, res);
    },
  };

  const toolbarConfig = {
    toolbarKeys: [],
  };
  if (props.toolbarType == '1') {
    toolbarConfig.toolbarKeys = [
      'bold',
      'underline',
      'italic',
      'through',
      'clearStyle',
      'color',
      'bgColor',
      'divider',
      'codeBlock',
      'codeSelectLang',
      'emotion',
      'insertLink',
      'justifyLeft',
      'justifyRight',
      'justifyCenter',
      'justifyJustify',
      'fontSize',
      'fontFamily',
      'uploadImage',
    ];
  } else if (props.toolbarType == '2') {
    toolbarConfig.toolbarKeys = [
      'bold',
      'underline',
      'italic',
      'through',
      'code',
      'sub',
      'sup',
      'clearStyle',
      'color',
      'bgColor',
      'fontSize',
      'fontFamily',
      'indent',
      'delIndent',
      'justifyLeft',
      'justifyRight',
      'justifyCenter',
      'justifyJustify',
      'lineHeight',
      'insertImage',
      'deleteImage',
      'editImage',
      'viewImageLink',
      'imageWidth30',
      'imageWidth50',
      'imageWidth100',
      'divider',
      'emotion',
      'insertLink',
      'editLink',
      'unLink',
      'viewLink',
      'codeBlock',
      'blockquote',
      'headerSelect',
      'header1',
      'header2',
      'header3',
      'header4',
      'header5',
      'todo',
      'redo',
      'undo',
      'fullScreen',
      'enter',
      'bulletedList',
      'numberedList',
      'insertTable',
      'deleteTable',
      'insertTableRow',
      'deleteTableRow',
      'insertTableCol',
      'deleteTableCol',
      'tableHeader',
      'tableFullWidth',
      'insertVideo',
      'uploadVideo',
      'editVideoSize',
      'uploadImage',
      'codeSelectLang',
    ];
  }

  const defaultContent = [
    {
      type: 'paragraph',
      fontFamily: '微软雅黑',
      children: [{ text: '' }],
    },
  ];

  const handleCreated = editor => {
    // 记录 editor 实例
    editorRef.value = editor;
    //valueHtml.value = props.text;
  };

  function handleChange() {
    //console.log(valueHtml.value);
  }

  // 组件销毁时，也及时销毁编辑器
  onBeforeUnmount(() => {
    const editor = editorRef.value;
    if (editor == null) return;
    editor.destroy();
  });

  function getHtml() {
    return editorRef.value.getHtml();
  }
  function getText() {
    return editorRef.value.getText();
  }
  function clearText() {
    valueHtml.value = '';
  }
  defineExpose({
    getHtml,
    getText,
    clearText,
  });
</script>
<template>
  <div :style="{ height: height, textAlign: textAlign }" style="width: 100%">
    <Toolbar :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
    <Editor
      :defaultContent="defaultContent"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
      @onChange="handleChange"
    />
  </div>
</template>
<style>
  Toolbar {
    border-bottom: 1px solid #ccc;
  }
  Editor {
    overflow-y: hidden;
  }
  .w-e-text-container {
    background-color: transparent;
  }
  .w-e-bar {
    background-color: transparent;
  }
</style>
